<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选单选</title>
    <style>
        table {
            width: 500px;
        }
        table thead th {
            color: #fff;
            background-color: #0099cc;
            cursor: pointer;
            user-select: none;
        }
        table tbody td {
            text-align: center;
        }
    </style>
</head>
<body>
    <table border cellpadding="10" cellspacing="0">
        <thead>
            <th>
                <label>
                    <input type="checkbox" class="checkAll">
                    <span>全选/全不选</span>
                </label>
            </th>
            <th>姓名</th>
            <th>节目</th>
            <th>演出费用</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>杨幂</td>
                <td>演唱 - 爱的供养</td>
                <td>2w</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>刘亦菲</td>
                <td>舞蹈 - 霓裳羽衣曲</td>
                <td>2w</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>刘诗诗</td>
                <td>小品 - 回家的诱惑</td>
                <td>2w</td>
            </tr>
        </tbody>
    </table>
    <script>
        let checkAll = document.querySelector(".checkAll")
        let checks = document.querySelectorAll(".check")
        checks = [...checks]
        // 全选
        checkAll.addEventListener("change", function(){
            // console.log(this.checked)
            checks.forEach(item=>{
                item.checked = this.checked
            })
        })
        // 单选
        checks.forEach(item=>{
            item.addEventListener("change", function(){
                // const isAll = checks.every(val=>{
                //     return val.checked
                // })
                // checkAll.checked = isAll
                // 假设法 - 假设全部选中
                let isAll = true
                for(let i=0;i<checks.length;i++){
                    if(checks[i].checked == false){
                        isAll= false
                        break;
                    }
                }
                checkAll.checked = isAll
            })
        })

    </script>
</body>
</html>